<template>
    <div class="background p_r">
        <!-- <div class="d_f weather a_i_c">
            <span>天气：晴</span>
            <img src="../../../assets/sun.png" alt="" class="sun">
            <span>温度：26℃</span>
        </div> -->
        <div class="title">{{simpleName}}可视化大屏</div>
        <div class="d_f a_i_c timer">
            <div class="day">{{ day }}</div>
            <div class="day m_l_5">{{ week }}</div>
            <div class="time m_l_10">{{ time }}</div>
            <img src="../../../assets/close.png" alt="" class="close m_l_20 c_p" @click="exit">
        </div>
        <div class="flex d_f j_c_s_b">
            <div class="left">
                <div class="tab d_f a_i_c">
                    贷款金额占比
                    <img src="../../../assets/trim.png" alt="" class="trim">
                </div>
                <div class="echarts">
                    <!-- <img src="../../../assets/echarts1.png" alt="" class="side">
                <img src="../../../assets/echarts.png" alt="" class="round">
                <img src="../../../assets/echarts2.png" alt="" class="side1" > -->
                    <div id="loanCharts"></div>
                </div>
                <div class="tab d_f a_i_c">
                    近6个月担保申请金额情况
                    <img src="../../../assets/trim.png" alt="" class="trim">
                </div>
                <div id="securityEcharts"></div>
                <div class="tab d_f a_i_c">
                    各产品担保情况
                    <img src="../../../assets/trim.png" alt="" class="trim">
                </div>
                <div id="columnarEcharts"></div>
            </div>
            <div class="center d_f j_c_c p_r">
                <img src="../../../assets/sphere.png" alt="" class="sphere">
                <div class="total d_f f_d_c a_i_c">
                    <div class="total_title">总担保金额</div>
                    <div class="total_money">{{ totalInfo.totalApplyAmount }}</div>
                    <div class="total_tips">（万元）</div>
                </div>
                <div class="number d_f f_d_c a_i_c">
                    <img src="../../../assets/center_icon1.png" alt="" class="number_icon">
                    <div class="number_size">{{ totalInfo.totalNum }}笔</div>
                </div>
                <div class="people d_f f_d_c a_i_c">
                    <img src="../../../assets/center_icon2.png" alt="" class="people_icon">
                    <div class="people_size">{{ totalInfo.customerNum }}人</div>
                </div>
            </div>
            <div class="right">
                <div class="tab d_f a_i_c padding">
                    TOP5 担保产品
                    <img src="../../../assets/trim.png" alt="" class="trim">
                </div>
                <div v-for="(item, index) in product" :key="index" class="w_100 top ">
                    <div class="d_f j_c_s_b m_t_10">
                        <div class="fabric">{{ item.productName }}</div>
                        <div class="number">{{ item.num }}<span class="unit">（个）</span> </div>
                    </div>
                    <div class="back d_f a_i_c">
                        <div class="fill" :style="{ width: item.rate + '%' }"></div>
                        <div class="class"></div>
                    </div>
                </div>
                <div class="tab d_f a_i_c education">
                    机构学历统计
                    <img src="../../../assets/trim.png" alt="" class="trim">
                </div>
                <div id="educationEcharts"></div>
                <div class="tab d_f a_i_c">
                    合作机构排名
                    <img src="../../../assets/trim.png" alt="" class="trim">
                </div>
                <div class="head d_f a_i_c">
                    <div style="width: 7%;text-align: center;"></div>
                    <div style="width: 25%;text-align: center;">机构名称</div>
                    <div style="width: 30%;text-align: center;">地区</div>
                    <div style="width: 20%;text-align: center;">总额度</div>
                    <div style="width: 16%;text-align: center;">合作业务</div>
                </div>
                <div class="auto">
                    <template v-for="(item, index) in ranking" :key="index">
                        <div class="d_f a_i_c m_t_10">
                            <div class="one d_f j_c_c a_i_c" v-if="index == 0">{{ index + 1 }}</div>
                            <div class="two d_f j_c_c a_i_c" v-if="index == 1">{{ index + 1 }}</div>
                            <div class="three d_f j_c_c a_i_c" v-if="index == 2">{{ index + 1 }}</div>
                            <div class="other d_f j_c_c a_i_c" v-if="index > 2">{{ index + 1 }}</div>
                            <el-tooltip :content="item.agencyName" effect="customized">
                                <div class="name ellipsis">{{ item.agencyName }}</div>
                            </el-tooltip>
                            <el-tooltip :content="item.area" effect="customized">
                                <div class="address ellipsis">{{ item.area }}</div>
                            </el-tooltip>
                            <el-tooltip :content="String(item.totalAmount) || '0'" effect="customized">
                                <div class="limit">{{ item.totalAmount || '0' }}</div>
                            </el-tooltip>
                            <el-tooltip :content="item.productName || '0'" effect="customized">
                                <div class="d_f j_c_c productName" style="width: 16%;">
                                    {{ item.productName }}
                                </div>
                            </el-tooltip>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang='ts'>
import { screenType } from '../../../type/report'
import moment from 'moment'
import 'echarts-gl';
import * as echarts from 'echarts';
import { defineComponent, reactive, toRefs, onBeforeMount, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router';
import { amountPercent, screenTotalBiz, productAmount, productBizCount, academicStat, agencyStat, amountByMonth,statisticalCompanyInfo } from '../../../api/report'
export default defineComponent({
    name: '',
    setup() {
        const data: screenType = reactive({
            day: '',
            week: '',
            time: '',
            timer: null,
            obj: {
                1: '周一',
                2: '周二',
                3: '周三',
                4: '周四',
                5: '周五',
                6: '周六',
                7: '周天',
            },
            product: [],
            ranking: [],
            totalInfo: {
                customerNum: 0,
                totalApplyAmount: 0,
                totalNum: 0,
            },
            start: '',
            end: '',
            loanChart:null,
            educationChart:null,
            securityChart:null,
            columnarChart:null,
            simpleName:'',
        })
        const router = useRouter()
        onBeforeMount(() => {
            methods.toggleFullScreen()
            data.day = moment(new Date()).format('YYYY-MM-DD')
            for (let i in data.obj) {
                if (moment().format('d') == i) {
                    data.week = data.obj[i]
                }
            }
            data.time = moment(new Date()).format('HH:mm:ss')
            data.timer = setInterval(() => {
                data.time = moment(new Date()).format('HH:mm:ss')
            }, 1000)

        })

        onMounted(() => {
            statisticalCompanyInfo({ id: '' }).then((res:any) => {
                if (!res) return
                data.simpleName= res.simpleName
            })
            methods.getData()

        })
        const methods = {

            toggleFullScreen() {
                document.documentElement.requestFullscreen()
            },
            togexitFullscreen(){
                document.exitFullscreen()
            },
            getData() {
                amountPercent({}).then((res: any) => {
                    methods.loanCharts(res)
                })
                screenTotalBiz({}).then((res: any) => {
                    res.totalApplyAmount = (res.totalApplyAmount / 10000).toFixed(2)
                    data.totalInfo = res
                })
                productAmount({ start: data.start, end: data.end }).then((res: any) => {
                    methods.columnarCharts(res)
                })
                productBizCount({}).then((res: any) => {
                    data.product = res.slice(0, 5)
                    let total = 0
                    data.product.map((item: any) => {
                        total += item.num
                    })
                    data.product.map((item: any) => {
                        item.rate = ((item.num / total) * 100).toFixed(2)
                    })
                })
                academicStat({}).then((res: any) => {
                    methods.educationCharts(res)
                })
                agencyStat({}).then((res: any) => {
                    res.map((item: any) => {
                        if (item.agencyArea) {
                            let area = JSON.parse(item.agencyArea)
                            area = area.sort((a, b) => b.length - a.length)
                            let name = ''
                            area.map(item => {
                                if (name) {
                                    name = name + ',' + item.join('/')
                                } else {
                                    name = item.join('/')
                                }
                            })

                            item.area = name
                        }
                    })
                    data.ranking = res
                })
                amountByMonth({}).then((res: any) => {
                    methods.securityCharts(res)
                })
            },
            //贷款金额占比
            loanCharts(list: any) {
                const loanChart = echarts.init(document.getElementById('loanCharts'));
                let series = []
                list.map((item: any) => {
                    series.push({ name: item.section, value: (item.guaMoney / 10000).toFixed(2), percent: item.percent })
                })
                loanChart.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter(params) {
                            return `${params.name}: ${params.value}万元 | ${params.percent}%`;
                        },
                    },
                    color: ['#FCE033', '#E47310', '#DCDCD9'],
                    legend: {
                        bottom: '10%',
                        left: 'center',
                        textStyle: {
                            color: '#999690' // 设置legend字体颜色为红色
                        },
                        itemWidth: 24, // 图形宽度
                        itemHeight: 4, // 图形高度
                    },

                    series: [
                        {
                            name: '贷款金额占比',
                            type: 'pie',
                            center: ['50%', '40%'],
                            radius: ['40%', '60%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: false,
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: series
                        }
                    ]
                });
                data.loanChart = loanChart
            },
            //机构学历统计
            educationCharts(list: any) {
                let series = []
                list.map(item => {
                    series.push({ value: item.percent, name: item.academic + ' ' + item.percent + '%' })
                })
               const educationChart = echarts.init(document.getElementById('educationEcharts'));
                educationChart.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter(params) {
                            return `${params.name}`;
                        },
                    },
                    color: ['#FFBB00', '#FA8007', '#FF4D00'],
                    legend: {
                        orient: 'vertical',
                        right: '10%',
                        top: 'center',
                        textStyle: {
                            color: '#999690' // 设置legend字体颜色为红色
                        },
                        icon: 'circle',
                        itemWidth: 24, // 图形宽度
                        itemHeight: 4, // 图形高度
                    },

                    series: [
                        {
                            name: '学历统计',
                            type: 'pie',
                            center: ['30%', '50%'],
                            radius: ['50%', '60%'],
                            avoidLabelOverlap: false,
                            padAngle: 5,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: false,
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: series
                        }
                    ]
                });
                data.educationChart=educationChart
            },
            //近6个月担保申请金额情况
            securityCharts(list: any) {
           const securityChart = echarts.init(document.getElementById('securityEcharts'));
                let xaxis = list.map((item: any) => {
                    return item.date
                })
                let series = list.map((item: any) => {
                    return (item.guaMoney / 10000).toFixed(2)
                })
                securityChart.setOption({

                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow",
                        },
                    },
                    xAxis: {
                        type: 'category',
                        // boundaryGap: false,
                        data: xaxis,
                        axisLabel: {
                            color: '#fff',// x轴字体颜色
                            interval: 0//轴显示所有的数据
                        },
                        axisLine: {
                            lineStyle: {
                                show: false,//是否显示坐标轴轴线，
                                color: '',//x轴轴线的颜色
                                width: 1,//x轴粗细
                            }
                        },
                        splitLine: { show: false },
                    },
                    dataZoom: {
                        xAxisIndex: 0, //这里是从X轴的0刻度开始
                        show: true, //是否显示滑动条，不影响使用
                        type: "inside", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                        startValue: 0, // 从头开始。
                        endValue: 8, // 一次性展示几个。
                    },
                    legend: {
                        show: false,
                    },
                    yAxis: {
                        type: 'value',
                        name: '万元', // 设置Y轴标题
                        offset: 0,
                        axisLabel: {
                            color: '#fff',// x轴字体颜色
                            interval: 0//轴显示所有的数据
                        },
                        axisLine: {

                        },
                        splitLine: {
                            show: true, lineStyle: {
                                type: 'dashed',
                                color: '#262626'
                            }
                        }  // 不展示横向的网格线
                    },
                    grid: {
                        left: '0%',
                        right: "0%",
                        bottom: "10%",
                        top: '20%',
                        containLabel: true,
                    },
                    series: [
                        {
                            name: '金额情况',
                            data: series,
                            type: 'line',
                            // smooth: true,

                            showSymbol: false,
                            itemStyle: { // 设置标记的样式
                                normal: {
                                    color: 'rgba(255, 166, 0, 0.72)', // 标记点颜色
                                    // borderColor: 'blue', // 标记边框颜色
                                    borderWidth: 1 // 标记边框宽度
                                }
                            },
                            areaStyle: {
                                opacity: 0.3,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgba(255, 166, 0, 1)' // 起始颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(255, 166, 0, 0.1)', // 结束颜色
                                    },
                                ])
                            },
                        }
                    ],
                })
                data.securityChart=securityChart
            },
            getArr(name: string, list: any) {
                let arr = []
                list.map((item: any) => {
                    item.innerProductList.map((item1: any) => {
                        if (name == item1.productName) {
                            let guaMoney = '0'
                            if (item1.guaMoney > 0) {
                                guaMoney = (item1.guaMoney / 10000).toFixed(2)
                            }
                            arr.push(guaMoney)
                        }
                    })
                })
                return arr
            },
            getRandomGradient() {
                return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`
            },
            //各产品担保情况情况
            columnarCharts(res: any) {
                const chart = echarts.init(document.getElementById('columnarEcharts'));
                let xAxis = res.map((item: any) => {
                    return item.month
                })
                let series = []

                let list = res[0].innerProductList

                res.map((item: any) => {
                    list.map((item1: any) => {
                        if (!item.innerProductList.some((item2: any) => item2.productName == item1.productName)) {
                            item.innerProductList.push({ guaMoney: 0, productName: item1.productName })
                        }
                    })
                })
                let maxScore = res.reduce((prev, curr) => {
                    return prev > curr.innerProductList.length ? prev : curr.innerProductList.length
                })
                res.map((item: any) => {
                    if (item.innerProductList.length == maxScore) {
                        list = item.innerProductList

                    }
                })
                let legend = list.map((item: any) => {
                    return item.productName
                })
                res.map((item: any) => {
                    list.map((item1: any) => {
                        if (!item.innerProductList.some((item2: any) => item2.productName == item1.productName)) {
                            item.innerProductList.push({ guaMoney: 0, productName: item1.productName })
                        }
                    })
                })
                list.map((item: any) => {
                    series.push({
                        name: item.productName,
                        data: methods.getArr(item.productName, res),
                        type: 'line',
                        smooth: true,
                        // lineStyle: {
                        //     color: '#31FBFB' // 修改曲线颜色为红色
                        // },
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.5,
                            // color:methods.getRandomGradient()
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: methods.getRandomGradient()
                                },
                                {
                                    offset: 1,
                                    color: methods.getRandomGradient()
                                }
                            ])
                        },
                    })
                })
                console.log(series);
                chart.setOption({

                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow",
                        },
                    },
                    xAxis: {
                        type: 'category',
                        // boundaryGap: false,
                        data: xAxis,
                        axisLabel: {
                            color: '#fff',// x轴字体颜色
                            interval: 0//轴显示所有的数据
                        },
                        axisLine: {
                            lineStyle: {
                                show: false,//是否显示坐标轴轴线，
                                color: '',//x轴轴线的颜色
                                width: 1,//x轴粗细
                            }
                        },
                        splitLine: { show: false },
                    },
                    dataZoom: {
                        xAxisIndex: 0, //这里是从X轴的0刻度开始
                        show: true, //是否显示滑动条，不影响使用
                        type: "inside", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                        startValue: 0, // 从头开始。
                        endValue: 8, // 一次性展示几个。
                    },
                    legend: {
                        data: legend,
                        bottom: '0',
                        icon: 'circle',
                        textStyle: {
                            color: '#fff',
                            fontSize: 12
                        },
                        show:false,
                    },
                    yAxis: {
                        type: 'value',
                        name: '万元', // 设置Y轴标题
                        offset: 0,
                        axisLabel: {
                            color: '#fff',// x轴字体颜色
                            interval: 0//轴显示所有的数据
                        },
                        axisLine: {

                        },
                        splitLine: {
                            show: true, lineStyle: {
                                type: 'dashed',
                                color: 'rgba(56, 78, 97, 0.2)'
                            }
                        }  // 不展示横向的网格线
                    },
                    grid: {
                        left: '0%',
                        right: "0%",
                        bottom: "10%",
                        top: '20%',
                        containLabel: true,
                    },
                    series: series
                    //  [
                    //     {
                    //         name: '金额情况',
                    //         data: data,
                    //         type: 'line',
                    //         smooth: true,

                    //         showSymbol: false,
                    //         itemStyle: { // 设置标记的样式
                    //             normal: {
                    //                 color: 'rgba(75, 171, 255, 1)', // 标记点颜色
                    //                 // borderColor: 'blue', // 标记边框颜色
                    //                 borderWidth: 1 // 标记边框宽度
                    //             }
                    //         },
                    //         areaStyle: {
                    //             opacity: 0.3,
                    //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    //                 {
                    //                     offset: 0,
                    //                     color: 'rgba(75, 171, 255, 1)' // 起始颜色
                    //                 },
                    //                 {
                    //                     offset: 1,
                    //                     color: 'rgba(75, 171, 255, 0.1)', // 结束颜色
                    //                 },
                    //             ])
                    //         },
                    //     }
                    // ],
                })
                data.columnarChart=chart
            },
            exit(){
                methods.togexitFullscreen()
                router.go(-1)
            }
        }
        onUnmounted(() => {
            clearInterval(data.timer)
            data.columnarChart.dispose()
            data.securityChart.dispose()
            data.educationChart.dispose()
            data.loanChart.dispose()
            data.timer= data.columnarChart=data.securityChart=data.educationChart=data.loanChart= null
        });
        return {
            ...toRefs(data),
             ...methods
        }
    }
})
</script>
<style scoped lang='scss'>
.background {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-image: url('../../../assets/yellowScreen.png');

    .weather {
        color: #FFFFFF;
        font-size: 14px;
        font-family: 'typeface';
        position: absolute;
        top: 10px;
        left: 2.08vw;

        .sun {
            width: 1.25vw;
            margin: 0px 10px;
        }
    }

    .title {
        background: linear-gradient(180deg, #FFFFFF 0%, #E89534 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        font-family: 'typeface';
        font-size: 1.4vw;
        position: absolute;
        top: 10px;
        text-align: center;
        width: 100%;
    }

    .timer {
        position: absolute;
        top: 10px;
        right: 2.08vw;

        .day {
            color: rgba(203, 222, 237, 0.72);
            font-size: 12px;
        }

        .time {
            color: rgba(203, 222, 237, 0.72);
            font-size: 14px;
            font-weight: 700;
            font-family: 'typeface';
        }

        .close {
            width: 1.25vw;
        }
    }

    .flex {
        width: calc(100% - 4.16vw);
        height: calc(100% - 14vh);
        margin-left: 2.08vw;
        padding-top: 7vh;
    }

    .tab {
        width: calc(100% - 40px);
        background-image: url('../../../assets/tab1.png');
        height: 3.33vh;
        background-size: 100% 100%;
        position: relative;
        font-family: 'typeface';
        color: #FFFFFF;
        font-size: 0.83vw;
        padding: 0px 20px;

        .trim {
            position: absolute;
            bottom: 0px;
            right: 15%;
            width: 6.45vw;

        }
    }

    .left {
        width: 25%;
        height: 100%;

        .echarts {
            width: 100%;
            height: 30%;

            .side {
                width: 4.375vw;
                position: absolute;
                left: 0px;
            }

            .round {
                width: 6vw;
                position: absolute;
                left: 5%;
            }

            .side1 {
                width: 4.375vw;
                position: absolute;
                left: 6%;
            }
        }

        #loanCharts {
            width: 100%;
            height: 100%;
        }

        #securityEcharts {
            width: 100%;
            height: 30%;
        }

        #columnarEcharts {
            width: 100%;
            height: 30%;
        }
    }

    .center {
        width: calc(50% - 80px);
        margin: 0px 40px;
        height: 100%;

        .sphere {
            width: 100%;
            background-size: 100% 100%;
            height: 100%;
        }

        .total {
            position: absolute;
            top: 45%;

            .total_title {
                color: #FFFFFF;
                font-size: 1.5625vw;
                text-shadow: 0px 4px 4px #CD910A;
                font-family: 'typeface';
            }

            .total_money {
                color: #FFFFFF;
                text-shadow: 0px 4px 4px #D4950A;
                font-size: 1.5625vw;
                font-weight: 400;
                margin-top: 1vh;
            }

            .total_tips {
                text-shadow: 0px 4px 4px rgba(212, 149, 10, 0.56);
                color: rgba(255, 255, 255, 0.6);
                font-size: 0.93vw;
                margin-top: 2vh;
            }
        }

        .number {
            position: absolute;
            top: 52%;
            left: 9%;

            .number_icon {
                width: 3.031vw;
                background-size: 100% 100%;
            }

            .number_size {
                text-shadow: 0px 3.6px 3.6px #CD910A;
                color: #FFFBF1;
                font-size: 1vw;
                font-family: 'typeface';
            }
        }

        .people {
            position: absolute;
            top: 41%;
            right: 8%;

            .people_icon {
                width: 3.031vw;
                background-size: 100% 100%;
            }

            .people_size {
                text-shadow: 0px 3.6px 3.6px #CD910A;
                color: #FFFBF1;
                font-size: 1vw;
                margin-top: 1vh;
            }
        }
    }

    .right {
        width: 25%;
        height: 100%;

        .padding {
            margin-bottom: 2vh;
        }

        .education {
            margin-top: 4vh;
        }

        .top {
            margin-top: 1vh;
        }

        .fabric {
            color: #999690;
            font-size: 0.72vw;
            font-family: 'typeface';
        }

        .number {
            font-weight: 700;
            font-size: 0.72vw;
            color: #E6A820;
        }

        .unit {
            color: #999690;
            font-weight: 400;
        }

        .back {
            background: rgba(61, 61, 61, 0.32);
            height: 12px;
            width: 100%;
            margin-top: 1vh;
        }

        .fill {
            background: linear-gradient(to left, #FFBA21 -2%, rgba(255, 186, 33, 0) 100%);
            height: 100%;

        }

        .class {
            width: 5px;
            height: 16px;
            background: #FCE033;
        }

        #educationEcharts {
            width: 100%;
            height: 21%;
        }

        .head {
            background: rgba(255, 184, 0, 0.7);
            width: 100%;
            height: 2.08vw;
            color: rgba(255, 255, 255, 0.75);
            font-size: 0.833vw;
            margin-top: 2vh;
        }

        .auto {
            height: 24%;
            overflow: auto;
        }

        .one {
            box-sizing: border-box;
            border: 1px dashed #FFC934;
            background: rgba(255, 201, 52, 0.5);
            width: 6%;
            height: 100%;
            color: #FFFFFF;
            font-size: 0.83vw;
        }

        .two {
            box-sizing: border-box;
            border: 1px dashed #FFBB00;
            background: rgba(250, 183, 0, 0.5);
            width: 6%;
            height: 100%;
            color: #FFFFFF;
            font-size: 0.83vw;
        }

        .three {
            box-sizing: border-box;
            border: 1px dashed #FFC934;
            background: rgba(255, 201, 52, 0.5);
            width: 6%;
            height: 100%;
            color: #FFFFFF;
            font-size: 0.83vw;
        }

        .other {
            border: 1px dashed #AF8100;
            box-sizing: border-box;
            background: rgba(250, 183, 0, 0.1);
            width: 6%;
            height: 100%;
            color: #FFFFFF;
            font-size: 0.83vw;
        }

        .ellipsis {
            white-space: nowrap; //不换行
            overflow: hidden; //超出部分隐藏
            text-overflow: ellipsis; //文本溢出显示省略号
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
        }

        .name {
            width: calc(25% - 5px);
            margin-left: 5px;
        }

        .address {
            width: calc(30% - 5px);
            margin-left: 5px;
        }

        .limit {
            color: #F6DB8F;
            font-size: 1vw;
            font-weight: bold;
            width: calc(20% - 5px);
            text-align: center;
            white-space: nowrap; //不换行
            overflow: hidden; //超出部分隐藏
            text-overflow: ellipsis; //文本溢出显示省略号
        }

        .productName {
            white-space: nowrap; //不换行
            overflow: hidden; //超出部分隐藏
            text-overflow: ellipsis; //文本溢出显示省略号
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
        }

        .good {
            width: 1.45vw;
            height: 1.45vw;
        }
    }
}
</style>
<style lang='scss'>
.el-popper.is-customized {
    /* Set padding to ensure the height is 32px */
    padding: 6px 12px;
    background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129)) !important;
}

.el-popper.is-customized .el-popper__arrow::before {
    background: linear-gradient(45deg, #b2e68d, #bce689) !important;
    right: 0;
}
</style>